<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     <title>酒店后台管理系统</title>
    <!-- 引入 echarts.js -->
   <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts-en.common.js"></script>
   <script src="js/jquery.min.js"></script>
    
   <link rel="stylesheet" href="layui/css/layui.css">
  
   <script>
     function findRoomType(){
   	  $.ajax({
   			url:"",
   			type:"post",
   			data:{
   				checkIn:$("#start-time").val(),
   				checkOut:$("#end-time").val(),
   			},
   			success:function(data){
   				$(".room_type").html(data);
   			}
   		})
     }
   	function add(){
   		
   	}
   </script>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
	  <div class="layui-header">
	    <div class="layui-logo">酒店后台管理系统</div>
	    <!-- 头部区域（可配合layui已有的水平导航） -->
	    <ul class="layui-nav layui-layout-right">
	      <li class="layui-nav-item">
	        <a href="javascript:;">
	          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
	          贤心
	        </a>
	        <dl class="layui-nav-child">
	          <!-- <dd><a href="">消息<span class="layui-badge">99+</span></a></dd> -->
	        </dl>
	      </li>
	      <li class="layui-nav-item"><a href="logout">退了</a></li>
	    </ul>
	  </div>
	  
	  <div class="layui-side layui-bg-black">
	    <div class="layui-side-scroll">
	      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
	      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
	        <li class="layui-nav-item ">
	          <a class="" href="javascript:;">订单管理</a>
	          <dl class="layui-nav-child">
	            <dd><a href="/html/offline.html">线下开单</a></dd>
	            <dd><a href="/checkin.html">线下开房</a></dd>
	            <dd><a href="/html/checkout.html">宾客结账</a></dd>
	            <dd><a href="/html/order.html">订单管理</a></dd>
	          </dl>
	        </li>
	       <li class="layui-nav-item layui-nav-itemed">
	          <a href="">营业查询</a>
	          <dl class="layui-nav-child">
	            <dd><a href="/selguest.html">入住宾客查询</a></dd>
	            <dd><a href="/turnover.html">日/月营业查询</a></dd>
	          </dl>
	        </li>
	        <li class="layui-nav-item">
	          <a href="javascript:;">系统设置</a>
	          <dl class="layui-nav-child">
	            <dd><a href="/vip.html">VIP设置</a></dd>
	        		<dd><a href="/discount.html">计费设置</a></dd>
	        		<dd><a href="/room.html">房间设置</a></dd>
					<dd><a href="/admin.html">操作员设置</a></dd>
	          </dl>
	        </li>
	        <li class="layui-nav-item"><a href="/html/confirm.html">推送消息</a></li>
	      </ul>
	    </div>
	  </div>
	  
	  <div class="layui-body">
	    <!-- 内容主体区域 -->
		<!-- <form class="layui-form" action=""> -->
			
			<div class="layui-order-message">
				<!-- 营业额查询 -->
				<hr class="layui-bg-green">
			</div>
		 <div id="main" style="width: 1200px;height:400px;"></div>
		
		
			

		选择年份:<select id="year" style="width: 150px;" name="year" >
						<option >------请选择------</option>
						<option value="2017">2017</option>
						<option value="2018">2018</option>
						<option value="2019">2019</option>
						</select>
			          
		     
			选择月份:<select id="month" style="width: 150px;" name="month">
						<option >------请选择------</option>
						<option value="01">1月份</option>
						<option value="02">2月份</option>
						<option value="03">3月份</option>
						<option value="04">4月份</option>
						<option value="05">5月份</option>
						<option value="06">6月份</option>
						<option value="07">7月份</option>
						<option value="08">8月份</option>
						<option value="09">9月份</option>
						<option value="10">10月份</option>
						<option value="11">11月份</option>
						<option value="12">12月份</option>
						</select>
						 <button id=find >查找</button>
						 
			<div id="main1" style="width: 1200px;height:400px;"></div>
			<div id="main2" style="width: 1200px;height:400px;"></div>
		
		<!-- </form> -->
	  </div>
	  
	  <div class="layui-footer">
	    <!-- 底部固定区域 -->
	    © 版权归酒店所有
	  </div>
	</div>
			
		</body>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
		
        var myChart = echarts.init(document.getElementById('main'));
		     // 指定图表的配置项和数据
       myChart.setOption({
            title: {
                text: '本月营业额详细'
            },
            tooltip: {},
            legend: {
                data:['日营业额']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '日营业额',
                type: 'bar',
                data: []
            }]
        });

       myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var names=[];    //类别数组（实际用来盛放X轴坐标值）
         var nums=[];    //销量数组（实际用来盛放Y坐标值）
         
         $.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "turnover/findMonthMoney",    //请求发送
         data : {},
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i].time);    //挨个取出类别并填入类别数组
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].total);    //挨个取出销量并填入销量数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '日营业额',
                            data: nums
                        }]
                    });
                    
             }
         
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })
	
	
    </script>

   <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
		$("#find").click (function(){
			
		
        var myChart = echarts.init(document.getElementById('main1'));
		     // 指定图表的配置项和数据
       myChart.setOption({
            title: {
                text: '年营业额详细'
            },
            tooltip: {},
            legend: {
                data:['月营业额']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '月营业额',
                type: 'bar',
                data: []
            }]
        });

       myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var names=[];    //类别数组（实际用来盛放X轴坐标值）
         var nums=[];    //销量数组（实际用来盛放Y坐标值）
         
         $.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "turnover/Monthmoney",    //请求发送到TestServlet处
         data : {year:$("#year").val()},
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i].month_id);    //挨个取出类别并填入类别数组
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].month_money);    //挨个取出销量并填入销量数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '月营业额',
                            data: nums
                        }]
                    });
                    
             }
         
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })
	})
    </script>
	
	
	   <script type="text/javascript">
	     // 基于准备好的dom，初始化echarts实例
			$("#find").click (function(){
				
			
	     var myChart = echarts.init(document.getElementById('main2'));
			     // 指定图表的配置项和数据
	    myChart.setOption({
	         title: {
	             text: '月营业额详细'
	         },
	         tooltip: {},
	         legend: {
	             data:['日营业额']
	         },
	         xAxis: {
	             data: []
	         },
	         yAxis: {},
	         series: [{
	             name: '日营业额',
	             type: 'bar',
	             data: []
	         }]
	     });
	
	    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
	      
	      var names=[];    //类别数组（实际用来盛放X轴坐标值）
	      var nums=[];    //销量数组（实际用来盛放Y坐标值）
	      
	      $.ajax({
	      type : "post",
	      async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
	      url : "turnover/OneDaymoney",    //请求发送到TestServlet处
	      data : {year:$("#year").val(),
		  month:$("#month").val(),
		  },
	      dataType : "json",        //返回数据形式为json
	      success : function(result) {
	          //请求成功时执行该函数内容，result即为服务器返回的json对象
	          if (result) {
	                 for(var i=0;i<result.length;i++){       
	                    names.push(result[i].time);    //挨个取出类别并填入类别数组
	                  }
	                 for(var i=0;i<result.length;i++){       
	                     nums.push(result[i].total);    //挨个取出销量并填入销量数组
	                   }
	                 myChart.hideLoading();    //隐藏加载动画
	                 myChart.setOption({        //加载数据图表
	                     xAxis: {
	                         data: names
	                     },
	                     series: [{
	                         // 根据名字对应到相应的系列
	                         name: '日营业额',
	                         data: nums
	                     }]
	                 });
	                 
	          }
	      
	     },
	      error : function(errorMsg) {
	          //请求失败时执行该函数
	      alert("图表请求数据失败!");
	      myChart.hideLoading();
	      }
	 })
		})
	 </script>
	 
  
	
	
    
</html>

